#ruleContainer {
}

#ruleTable {
}

.ruleTitle {
  font-style: italic;
  padding: 4px;
  height: 15px;
  cursor: move;
  border-radius: 5px 5px 0 0;
}

.ruleContents {
  padding: 5px;
  border-left:1px solid #aeaeae;
  border-right:1px solid #aeaeae;
  border-bottom:1px solid #aeaeae;
}

.transformProperty {
  display: inline-block;
  width: 240px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transformRule .mdl-grid {
  padding: 0px;
  margin: 0px;
}

.transformRule .mdl-cell.di-rule-target-value {
  margin: 0;
}

.transformRule .mdl-cell.di-rule-target-type {
  margin: 0 0 0 14px;
}

.mdl-cell.mdl-cell--4-col.di-rule-target-type::before {
  content: "Type";
  color: rgb(255, 255, 255);
  background-color: rgb(119, 119, 119);
  padding: 2.1px 6.3px 3.2px 6.3px;
  border-radius: 2.6px;
  font-size: 10.5px;
  margin-right: 5px;
  font-weight: bold;
}

/*.mdl-cell.mdl-cell--4-col.di-rule-target-type::after {
  content: ")";
  color: rgba(0,0,0,.54);
}*/

/* Set colors for different mapping types. */

.rule-type-indicator {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 5px;
}
/* General Properties */

.ui-autocomplete {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}

th,td
{
  padding: 5px;
}

/* rule details */
.di-rule__expanded .di-rule-grey-box {
  background-color: #dadada;
  padding: 4px 8px;
}

.di-rule__expanded .di-rule-grey-box:nth-of-type(1n+2) {
  margin-top: 5px;
}

.di-rule__expanded dl {
  margin: 0px;
}

.di-rule__expanded dt {
  float: left;
  margin-right: 10px;
}

.di-rule__expanded dd {
}

.di-rule-property-name {
  font-weight: bold;
}

.di-rule-property-domain, .di-rule-property-range {
}

.di-rule__expanded .di-rule__expanded-example-values {
  width: 100%;
  border: none;
  background-color: #dadada;
}

.di-rule__expanded .di-rule__expanded-example-values th {
  border: none;
  padding: 5px 10px;
}

.di-rule__expanded .di-rule__expanded-example-values td {
  border: none;
  padding: 2px 10px;
}

.di-rule__expanded .di-rule__expanded-example-values tr, .di-rule__expanded .di-rule__expanded-example-values th, .di-rule__expanded .di-rule__expanded-example-values td {
  height: inherit;
}

.di-rule__expanded-header {
  font-weight: bold;
  margin-bottom: 5px;
}

.di-rule-details-container-source {
  display: none;
}

.di-rule-property-description {
  font-style: italic;
}

.di-rule-chip-container {
  display: flex;
  flex-wrap: wrap;
}

.di-rule-chip-container-paths .mdl-chip {
  border-radius: 0px;
}

.di-rule-chip-container .mdl-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-rule-first-path, .di-rule__expanded-example-values thead tr {
  border-top: solid 1px rgba(0, 0, 0, 0.117647);
}

.di-rule__expanded-example-values .di-rule-first-path td {
  padding-top: 4px;
}

.di-rule__expanded-example-values .di-rule-last-path td {
  padding-bottom: 4px;
}

.di-rule__expanded-example-values tbody {
  background: white;
  border-bottom: solid 1px rgba(0, 0, 0, 0.117647);
}

.di-rule-example-source-path {
  background: #dadada;
  padding: 8px 12px;
}

.di-rule__expanded-example-values .di-rule-example-value {
  background: #dadada;
  margin-right: 4px;
}

.di-rule__expanded-example-values .di-rule-example-path-1 {
  background: #DADADA;
}

.di-rule__expanded-example-values .di-rule-example-path-2 {
  background: #E1CBAE;
}

.di-rule__expanded-example-values .di-rule-example-path-3 {
  background: #E8BC83;
}

.di-rule__expanded-example-values .di-rule-example-path-4 {
  background: #EFAD57;
}


.di-rule__expanded-example-values .di-rule-example-path-target {
  background: #FE8F01;
}

/* autocomplete categories */
.ui-autocomplete-category {
  font-size: 120%;
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

.ui-autocomplete-property-label {
  font-weight: bold;
}

.ui-autocomplete-property-uri {
  font-size: 85%;
  font-style: italic;
  margin-left: 10px;
}

.ui-autocomplete-warning {
  color: red;
  cursor: default;
}

.ui-autocomplete-warning:hover, ui-autocomplete-warning.ui-state-focus {
  cursor: default;
  background: transparent;
  color: red;
  border-color: transparent;
}

/* target type select */
.rule-target-type .mdl-selectfield {
  padding: 4px 0;
}

.rule-target-type .mdl-selectfield__select {
  font-size: 13px;
}

/**** Transform Editor ******/

#ruleConfigContainer {
  margin-bottom: 15px;
  width: 100%;
}

#ruleConfigContainer .mdl-card__title button {
  margin-right: 5px;
}

#ruleConfigContainer .mdl-card__supporting-text {
  padding-top: 0px;
  padding-bottom: 0px;
}

.di-vertical-align:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0px;
}

.config-label {
  margin-left: 19px;
}

.mdl-chip.typeMapping {
  float: left;
  margin: 2px 3px 2px 0px;
}

#uri {
  display: inline-block;
  width: 90%;
}

.uri-ui--replacement div {
  display: inline-block;
  font-size: 16px;
  color: rgba(0,0,0,.26);
  padding-top: 24px;
  padding-bottom: 25px;
}

.uriMapping {
  display: inline-block;
  width: 50%;
}

.uriMapping .mdl-textfield {
  width: 100%;
}

#ruleConfigContainer .mdl-card__title-text {
  margin-bottom: 3px;
}

.mdl-card__title-text .di-highlight {
  /*font-style: italic;*/
  font-weight: bold;
}

#ruleConfigContainer .mdl-grid {
  padding: 0 8px;
}

#ruleTable table {
  table-layout: fixed;
}

th.rule-toggle {
  width: 30px;
}

th.rule-type {
  width: 180px;
}

th.rule-target-type {
  width: 120px;
}

.rule-source .mdl-textfield, .rule-target-property .mdl-textfield {
    width: 100%;
}

th.rule-actions {
  width: 120px;
}

/* overflow doesn't respect padding-right (of the table cell),
   so we need to use an inner div */
.di-rule-details-container-target-property div {
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
}

#ruleTable .mdl-textfield {
  padding: 5px 0;
}

/*
  The next two rules allow to have a hover effect over several
  rows instead of just one. The individual rows are contained
  in a <tbody class="complete-rule"> element
  see http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table
*/
#ruleTable .mdl-data-table tbody tr:hover {
    background-color: transparent;
}
.complete-rule:hover {
  background-color: #eee;
}

#ruleTable .transformRule td.rule-table-cell {
  border-bottom: none;
}

#ruleTable .di-rule__expanded td.rule-table-cell {
  border: none;
}

#ruleTable .mdl-textfield__input {
  font-size: 13px;
}

td.rule-toggle, th.rule-toggle {
  padding-left: 5px;
  padding-right: 0px;
}

.rule-template {
  display: none;
}

.rule-name {
  display: none;
}

/*
.rule-actions {
  min-width: 160px;
}
*/

/*
.rule-action-buttons {
  display: none;
}
*/

#typeContainer {
  display: inline-block;
}

#rule-type-textfield {
  padding-bottom: 3px;
  vertical-align: bottom;
  padding-top: 5px;
}

#ruleTable button {
  color: rgba(0, 0, 0, 0.541176);
}

/*
.transformRule .rule-actions .delete-button {
  color: #CB4335;
}
*/

/*
* New Colors for Transform Editor Overview
*/

.directMapping .rule-type-indicator {
  background-color: #B0BEC5;
}

.uriMapping .rule-type-indicator {
  background-color: #80CBC4;
}

.objectMapping .rule-type-indicator {
  background-color: #CE93D8;
}

.complexMapping .rule-type-indicator {
  background-color: #9FA8DA;
}


